<template>
  <div>
    <!-- 添加按钮 -->
    <div class="btn">
      <el-button size="small" type="success" @click="addShow">添加</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="specList" style="width: 100%">
      <el-table-column prop="specName" label="规格名称" width="400" />
      <el-table-column #default="scope" label="规格值" width="400">
        <div
          v-for="(item1, index1) in scope.row.specValue"
          :key="index1"
          style="padding: 5px; margin: 0; width: 100%"
        >
          {{ item1.key }}：
          <span
            v-for="(item2, index2) in item1.valueList"
            :key="index2"
            class="div-atrr"
          >
            {{ item2 }}
          </span>
        </div>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">
            修改
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!-- pagination -->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="loadData"
      @current-change="loadData"
      style="margin-top: 20px"
    />
    <!-- 弹窗 -->
    <div>
      <el-dialog v-model="dialogVisible" title="添加或修改" width="40%">
        <el-form label-width="120px">
          <el-form-item label="规格名称">
            <el-input v-model="productSpec.specName" />
          </el-form-item>
          <el-form-item>
            <el-button
              size="default"
              type="success"
              @click="productSpec.specValue.push({})"
            >
              添加新规格
            </el-button>
          </el-form-item>
          <el-form-item
            label=""
            v-for="(item, index) in productSpec.specValue"
            :key="index"
          >
            <el-row>
              <el-col :span="10">
                <el-input
                  v-model="item.key"
                  placeholder="规格"
                  style="width: 90%"
                />
              </el-col>
              <el-col :span="10">
                <el-input
                  v-model="item.valueList"
                  placeholder="规格值(如:白色,红色)"
                  style="width: 90%"
                />
              </el-col>
              <el-col :span="4">
                <el-button
                  size="default"
                  type="danger"
                  @click="productSpec.specValue.splice(index, 1)"
                >
                  删除
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item align="right">
            <el-button type="primary" @click="handleSaveOrUpdate">
              提交
            </el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  GetSpecList,
  DeleteSpec,
  UpdateSpec,
  SaveSpec,
} from '@/api/productSpec'
import { ElMessage, ElMessageBox } from 'element-plus'
const specList = ref([])
const pageNum = ref(1)
const pageSize = ref(3)
const total = ref(0)
const loadData = async () => {
  const { data } = await GetSpecList(pageNum.value, pageSize.value)
  specList.value = data.list
  // console.log(data)
  specList.value.forEach(item => {
    item.specValue = JSON.parse(item.specValue)
  })
  total.value = data.total
}
onMounted(() => {
  loadData()
})
//弹窗
const productSpec = ref({
  specValue: [],
})
const dialogVisible = ref(false)
//添加或修改
//添加
const addShow = () => {
  dialogVisible.value = true
  productSpec.value = { specValue: [] }
}
const handSave = async () => {
  // {specName:"键盘",specValue:[{key: "类型", valueList: "红，黑，茶"}, {key: "用途", valueList: "商务，个人"}]}
  if (productSpec.value.specValue) {
    productSpec.value.specValue.forEach(item => {
      item.valueList = item.valueList.split(',')
    })
    productSpec.value.specValue = JSON.stringify(productSpec.value.specValue)
  }
  console.log(productSpec.value)
  await SaveSpec(productSpec.value)
  loadData()
  dialogVisible.value = false
  ElMessage.success('添加成功')
}
//修改
const handleEdit = row => {
  dialogVisible.value = true
  // Object.assign(productSpec.value ,row)
  productSpec.value = JSON.parse(JSON.stringify(row))
  console.log(productSpec.value)
}

const handUpdate = async () => {
  // productSpec.value.specValue = JSON.stringify(productSpec.value.specValue)
  if (productSpec.value.specValue) {
    productSpec.value.specValue.forEach(specValue => {
      if (typeof specValue.valueList === 'string') {
        specValue.valueList = specValue.valueList.split(',')
      }
    })
  }
  productSpec.value.specValue = JSON.stringify(productSpec.value.specValue)
  await UpdateSpec(productSpec.value)
  loadData()
  dialogVisible.value = false
  ElMessage.success('修改成功')
}
//修改或添加
const handleSaveOrUpdate = () => {
  if (productSpec.value.id) {
    handUpdate()
  } else {
    handSave()
  }
}
//删除
const handleDelete = row => {
  ElMessageBox.confirm(`确认删除当前商品规格吗?`, 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      await DeleteSpec(row.id)
      loadData()
    })
    .catch(() => {
      ElMessage({
        type: 'success',
        message: '取消删除',
      })
    })
}
</script>

<style>
.btn {
  background-color: #fff;
  height: 50px;
  line-height: 50px;
  margin-bottom: 15px;
  padding-left: 15px;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.div-atrr {
  padding: 5px 10px;
  margin: 0 10px;
  background-color: powderblue;
  border-radius: 10px;
}
</style>
